<template>
    <div class="node-container">
        <div class="top" />
        <div class="mid">
            <span>输入形状处理</span>
            <div class="node-content">
                <span>{{ superProps.title }}</span>
                <el-icon class="opt-button" @click="handleClick(superProps.type)">
                    <Tools />
                </el-icon>
            </div>
            <span>输出形状处理</span>
        </div>
        <div class="bottom" />
    </div>
</template>

<script setup name="DataNode">
// TODO
/**
    use inject for getNode and getGraph, listing data change
*/
import { ElIcon } from 'element-plus'
import { Tools } from '@element-plus/icons-vue';
import { inject, onMounted } from 'vue';

const superProps = defineProps({
    title: {
        type: String,
        default: '默认标题'
    },
    type: {
        type: String,
        required: true
    }
})

const getGraph = inject('getGraph')

const handleClick = (val) => {
    const graph = getGraph()
    graph.callForToolsBar(val)
}

</script>

<style lang="scss" scoped>
.node-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top {
        width: 0;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
        border-bottom: 30px solid white;
    }
    .mid {
        width: 104px;
        height: 60px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        span {
            font-size: small;
        }
        .node-content {
            width: 100%;
            height: 50%;
            border: 1px solid #000;
            border-radius: 4px;
            background-image: linear-gradient(to right, #00b700, #00f700);
            display: flex;
            justify-content: space-around;
            align-items: center;
            .opt-button {
                cursor: pointer;
            }
        }
    }

    .bottom {
        width: 0;
        border-top: 30px solid white;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
    }
}
</style>